<template>
    <el-dialog :visible.sync="isShow" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" destroy-on-close>
      <div slot="title">{{single ? '编辑信息' : '批量编辑信息'}}</div>
      <el-form>
        <el-row v-if="single && storeData">
            <el-col :span="10">
                <el-form-item label="商品名称：">
                    <span>{{storeData.title}}</span>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="售价：">
                    <span>{{storeData.minPrice}}</span>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="成本价：">
                    <span>{{storeData.minSupplyPrice}}</span>
                </el-form-item>
            </el-col>
            <el-col :span="2">
                <div data-v-df2caad4="" class="el-form-item el-form-item--medium">
                    <label class="el-form-item__label">
                        <span class="text-brand pointer" @click="pathStoreDetail()">去修改</span>
                    </label>
                </div>
            </el-col>
        </el-row>
        
        <div v-else>
          <el-form-item>
            <span class="text-danger">批量设置已选中的{{list.length}}个商品</span>
          </el-form-item>
        </div>

        <el-form-item label="分佣比率：">
          <el-radio-group v-model="type">
            <el-radio :label="0">使用默认</el-radio>
            <el-radio :label="1">自定义设置<span class="text-lightgray">（二级分销奖励相加不得超过30%）</span></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="分享奖励（%）">
         <div class="flex flex-wrap flex-start">
           <div class="liveItem" v-for="(item, index) in levelList" :key="index" :class="{'margin_left_10': index > 0}">
             <div class="text-center">{{item.levelName}}</div>
             <el-input-number :disabled="type == 0" controls-position="right" v-model.trim="item.shareCustomerRatio" placeholder="请输入分享奖励" :precision="0" :step="1" :min="0" :max="100" />
           </div>
         </div>
        </el-form-item>
        <el-form-item label="邀请奖励（%）">
          <div class="flex flex-wrap flex-start">
            <div class="liveItem" v-for="(item,index) in levelList" :key="index" :class="{'margin_left_10': index > 0}">
              <div class="text-center">{{item.levelName}}</div>
              <el-input-number :disabled="type == 0" controls-position="right" v-model.trim="item.inviterRatio" placeholder="请输入邀请奖励" :precision="0" :step="1" :min="0" :max="100" />
            </div>
          </div>
        </el-form-item>
        <!-- <el-form-item label="商家奖励（%）">
          <div class="flex flex-wrap flex-start">
            <div class="liveItem" v-for="(item,index) in levelList" :key="index" :class="{'margin_left_10': index > 0}">
              <div class="text-center">{{item.levelName}}</div>
              <el-input-number :disabled="type == 0" controls-position="right" v-model.trim="item.inviterRatio" placeholder="请输入商家奖励" :precision="0" :step="1" :min="0" :max="100" />
            </div>
          </div>
        </el-form-item> -->
      </el-form>
      <div slot="footer">
        <el-button @click="closeOption()">取 消</el-button>
        <el-button type="primary" @click="comfirmOption()" :loading="loading">确 定</el-button>
      </div>
    </el-dialog>
</template>

<script>
  import { UpdateSharedGoodOne, UpdateSharedGoodAll } from '@/views/shared-management/services/index';
  export default {
    props: {
      single: {
          type: Boolean,
          default: true
      },
      isShow: {
          type: Boolean,
          default: false
      },
      list: {
          type: Array,
          default: []
      },
      levelList: Array
    },
    computed: {
       storeData() {
           return this.single ? this.list[0] : null;
       }
    },
    data() {
      return{
        type: 0,
        loading: false
      }
    },
    methods:{
      pathStoreDetail() {
        this.closeOption();
        this.$router.push({
          name: 'StoreEdit',
          params: {
            id: this.storeData.goodsId
          }
        })
      },
      closeOption() {
        this.$emit('close');
      },
      comfirmOption() {
        this.loading = true;
        if (this.single) {
            this.saveSharedStoreOne();
        } else {
            this.saveSharedStoreAll();
        }
      },
      saveSharedStoreOne(){
        UpdateSharedGoodOne({
            refundType: this.type,
            levelList: this.levelList.map(item => {
                delete item.id
                return item;
            }),
            update_id: JSON.parse(this.$store.getters.userInfo).id ? JSON.parse(this.$store.getters.userInfo).id : '1',
            goodsId: this.storeData.goodsId,
            id: this.storeData.id
        })
        .then(res => {
          this.loading = false;
          if (res.code == 200) {
            this.$message.success('修改成功!');
            this.$emit('confirm');
          } else {
            this.$message.error('修改失败!');
          }
        })
        .catch(error => {
          this.loading = false;
        })
      },
      saveSharedStoreAll() {
        UpdateSharedGoodAll({
            refundType: this.type,
            shareGoodsList: this.list.map(item => {
                return { id: item.id, goodsId: item.goodsId }
            }),
            levelList: this.levelList.map(item => {
                delete item.id
                return item;
            }),
            update_id: JSON.parse(this.$store.getters.userInfo).id ? JSON.parse(this.$store.getters.userInfo).id : '1'
        })
        .then(res => {
          this.loading = false;
          if (res.code == 200) {
            this.$message.success('修改成功!');
            this.$emit('confirm');
          } else {
            this.$message.error('修改失败!');
          }
        })
        .catch(error => {
          this.loading = false;
        })
      }
    }
  }
</script>

<style scoped lang="scss">
.liveItem {
    flex: 0 0 100px;
    max-width: 100px;
    display: flex;
    flex-direction: column;

    .el-input-number {
        width: 100px;
    }
}

::v-deep .el-input-number .el-input__inner {
    text-align: left;
}
</style>
